<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import InfraredConfigDialog from '@/components/InfraredConfigDialog.vue'
import AlarmConfigDialog from '@/components/AlarmConfigDialog.vue'
import AlarmListDialog from '@/components/AlarmListDialog.vue'
import ReportManagerDialog from '@/components/ReportManagerDialog.vue'
// import UserManageDialog from '@/components/UserManageDialog.vue'

// 定义变量
const infraredConfigDialog = ref()
const alarmConfigDialog = ref()
const alarmListDialog = ref()
const reportManagerDialog = ref()
const userManageDialog = ref()

// 定义方法
const router = useRouter()

const pageTitle = window.Glob.systemName

// 展示红外配置
const showInfraredconfig = () => {
  console.log('红外配置')
  infraredConfigDialog.value.showInfraredconfig()
}
// 展示报警配置
const showAlarmConfig = () => {
  console.log('报警配置')
  alarmConfigDialog.value.showAlarmConfig()
}
// 展示报警列表
const showAlarmList = () => {
  console.log('报警列表')
  alarmListDialog.value.showAlarmList()
}
// 展示报表管理
const showReportManager = () => {
  console.log('报警列表')
  reportManagerDialog.value.showReportManager()
}
// 展示用户管理
const showUsertManager = () => {
  console.log('红外配置')
  userManageDialog.value.showUserManage()
}
// 退出页面
const exitPage = () => {
  console.log('退出')
  router.replace('/')
}
</script>

<template>
  <div class="head-main-box">
    <div class="container-box">
      <div class="left-border-box">
        <div class="logo-box" />
        <div class="name-box">
          {{ pageTitle }}
        </div>
      </div>
      <div class="right-border-box">
        <!-- <div class="btn-box">
          <div class="empty-box" />
          <div
            class="btn-name-box"
            @click="showInfraredconfig"
          >
            <div>
              红外配置
            </div>
          </div>
        </div> -->
        <div class="btn-box">
          <div class="empty-box" />
          <div
            class="btn-name-box"
            @click="showAlarmConfig"
          >
            <div>
              报警配置
            </div>
          </div>
        </div>
        <div class="btn-box">
          <div class="empty-box" />
          <div
            class="btn-name-box"
            @click="showAlarmList"
          >
            <div>
              报警列表
            </div>
          </div>
        </div>
        <div class="btn-box">
          <div class="empty-box" />
          <div
            class="btn-name-box"
            @click="showReportManager"
          >
            <div>
              报表管理
            </div>
          </div>
        </div>
        <!-- <div class="btn-box">
          <div class="empty-box" />
          <div
            class="btn-name-box"
            @click="showUsertManager"
          >
            <div>
              用户管理
            </div>
          </div>
        </div> -->
        <!-- <div class="btn-box">
          <div class="empty-box" />
          <div
            class="btn-name-box"
            @click="exitPage"
          >
            <div>
              退出
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  <div class="dialog-box">
    <InfraredConfigDialog ref="infraredConfigDialog" />
    <AlarmConfigDialog ref="alarmConfigDialog" />
    <AlarmListDialog ref="alarmListDialog" />
    <ReportManagerDialog ref="reportManagerDialog" />
    <!-- <UserManageDialog ref="userManageDialog" /> -->
  </div>
</template>

<style lang="scss" scoped>
.head-main-box {
  width: 100%;
  height: 80%;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 80%) 0%,
    rgb(255 255 255 / 20%) 100%
  );

  /* border: 1px solid blue; */
  border-radius: 0;
  opacity: 1;
  .container-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    /* padding-top: 1%; */

    /* border: 1px solid red; */
    opacity: 1;
    .left-border-box {
      display: flex;
      align-items: center;
      height: 80%;
      border-right: 1px solid #add9ff;
      border-bottom: 1px solid #add9ff;
      transform: skew(-40deg);
      .logo-box {
        width: 100px;
        height: 80%;
        margin-left: 5%;
        background-image: url("../assets/bckImg/logo 1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transform: skew(40deg);
      }
      .name-box {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0 24px;
        padding: 0 10px;
        font-weight: 400;
        font-size: 28px;
        font-family: HXBNS,sans-serif;
        letter-spacing: 5px;
        white-space: nowrap;
        background: linear-gradient(
          180deg,
          #317ada 0%,
          rgb(49 122 218 / 40%) 100%
        );
        background-clip: text;
        transform: skew(40deg);
        -webkit-text-fill-color: transparent;
      }
    }
    .right-border-box {
      display: flex;

      /* width: 1310px; */
      width: 74%;
      height: 80%;
      border-top: 1px solid #add9ff;
      border-left: 1px solid #add9ff;
      border-top-left-radius: 8px;
      border-bottom-left-radius: -8px;
      transform: skew(-40deg);
      .btn-box {
        display: flex;

        /* width: 200px;
        height: 52px;
        margin-top: 6px; */
        width: 10.42vw;
        height: 4.41vh;
        margin-top: 0.6vh;
        font-size: 18px;

        /* border: 1px solid red; */
        .empty-box {
          /* width: 18px;
          height: 52px; */
          width: 1vw;
          height: 4.41vh;

          /* margin-left: 10px; */
          margin-left: 0.5vw;
          border: 1px solid #add9ff;
          border-radius: 3px;
        }
        .btn-name-box {
          /* width: 200px;
          height: 52px; */
          width: 10.42vw;
          height: 4.41vh;
          margin-left: 0.5vw;
          border: 1px solid #add9ff;
          border-radius: 4px;
          > div {
            height: 4.41vh;
            color: #6b7785;
            font-weight: 400;
            font-size: 18px;
            font-family: HXBNS,sans-serif;
            line-height: 4.41vh;
            letter-spacing: 3px;
            text-align: center;
            background-clip: text;
            transform: skew(40deg);
          }
        }
        .btn-name-box:hover {
          background: #add9ff33;
          cursor: pointer;
        }
        .btn-name-box:active {
          background: #add9ff00;
          cursor: pointer;
        }
      }
    }

    /* .right-border-box::before {
	position: absolute;
	right: auto;
	bottom: auto;
	left: 0;
	width: 1px;
	height: 18px;
	background-color: #ADD9FF;
  content: '';
} */
  }
}
</style>
